<!--  -->
<template>
  <div class="app-container">
    <div class="formDiv">
      <h5 class="titleInfo">报单信息</h5>
      <el-form ref="form" :inline="true" :model="form" label-width="130px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="医院">
              <el-input v-model="form.hospital_name" disabled clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目分类">
              <el-input v-model="form.category_name" disabled clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="用户姓名">
              <el-input v-model="form.realname" disabled clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用户手机号">
              <el-input v-model="form.user_pone" disabled clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="推荐人姓名">
              <el-input v-model="form.ref_realname" disabled clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="推荐人手机号">
              <el-input v-model="form.ref_pone" disabled clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="项目名称">
              <el-input v-model="form.dd_project_name" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目金额">
              <el-input v-model="form.project_price" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="医院结算金额">
              <el-input v-model="form.hospital_price" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button type="primary" @click="editInfo">编辑</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div>
      <h5 class="titleInfo">奖励信息</h5>
      <el-row>
        <el-col :span="16">
          <div v-loading="tableLoading">
            <el-table :data="tableData" class="tableData" style="width: 100%" border>
              <el-table-column prop="realname" label="推荐人姓名" align="center" />
              <el-table-column prop="username" label="手机号" align="center" />
              <el-table-column prop="role_name" label="推荐人级别" align="center" />
              <el-table-column prop="reward_price" label="奖励金额" align="center">
                <template
                  slot-scope="scope"
                >{{((scope.row.base_price * scope.row.ratio)/100).toFixed(2)}}</template>
              </el-table-column>
              <el-table-column prop="ratio" label="奖励比例" align="center">
                <template slot-scope="scope">
                  <el-form>
                    <el-form-item>
                      <el-input v-model="scope.row.ratio" size="mini" clearable />
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <el-table-column prop="type_name" label="奖励类型" align="center" />
              <el-table-column prop="base_price" label="分成基数" align="center" />
            </el-table>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="recommend">
            <div>当前推荐关系</div>
            <div v-if="userList.length>0">
              <div class="box" v-for="(item,index) in userList" :key="index">
                <div
                  class="boxContent"
                >{{item.username || ''}}{{item.realname || ''}}{{item.role_name || ''}}</div>
                <div class="arrow" v-if="index!=userList.length-1">↓</div>
              </div>
            </div>
            <div v-else class="mb_20">暂无</div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-form :model="form1" ref="form1" label-width="130px" :rules="rules">
        <el-row class="mr">
          <el-col :span="8">
            <el-form-item label="审核" prop="opt">
              <el-radio-group v-model="form1.opt">
                <el-radio :label="1">通过</el-radio>
                <el-radio :label="2">驳回</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <!-- prop="remark" -->
            <el-form-item v-if="form1.opt == 2" label="驳回原因">
              <el-input
                v-model="form1.remark"
                placeholder="最多100个字符，超过字数限制不继续可输入"
                maxlength="100"
                clearable
                type="textarea"
                rows="4"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item>
              <el-button type="primary" @click="handleSubmit('form1')">提交</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  toDetail,
  toCheck,
  reward,
  get_ref,
  getUpdate,
} from "@/api/traditionalMange";
export default {
  data() {
    return {
      form: {
        hospital_name: "",
        category_name: "",
        realname: "",
        user_pone: "",
        ref_realname: "",
        ref_pone: "",
        dd_project_name: "",
        project_price: "",
        hospital_price: "",
      },
      form1: {
        id: this.$route.query.opt.dd_id,
        opt: "",
        remark: "",
        admin_id: sessionStorage.getItem("userId"),
        reward: JSON.stringify(this.tableData),
      },
      tableData: [],
      userList: [],
      tableLoading: false,
      rules: {
        opt: [
          {
            required: true,
            message: "请添选择省份",
            trigger: "change",
          },
        ],
        // remark: [
        //   {
        //     required: true,
        //     message: "请输入驳回原因",
        //     trigger: "blur",
        //   },
        // ],
      },
    };
  },
  computed: {},
  mounted() {
    console.log("query", this.$route.query);
    console.log("refid", this.$route.query.opt.ref_id);
    this.getDetails(this.$route.query.opt.dd_id);
    this.rewardInfo(this.$route.query.opt.dd_id);
    this.getUser(this.$route.query.opt.ref_id);
  },

  methods: {
    // 编辑
    async editInfo() {
      let datas = {
        id: this.$route.query.opt.dd_id,
        project_name: this.form.dd_project_name,
        project_price: this.form.project_price,
        hospital_price: this.form.hospital_price,
      };
      let { data: res } = await getUpdate(datas);
      if (res.code == 200) {
        this.$message.success("修改成功");
        this.rewardInfo(this.$route.query.opt.dd_id);
      } else {
        this.$message.error(res.msg);
      }
    },
    // 获取奖励信息
    async rewardInfo(id) {
      let { data: res } = await reward({ order_id: id });
      if (res.code == 200) {
        this.tableData = res.data;
      } else {
        this.$message.error(res.msg);
      }
    },
    // 获取报单信息
    async getDetails(id) {
      let { data: res } = await toDetail({ id });
      if (res.code == 200) {
        this.form = res.data.info;
        this.tableData = res.data.reward_info;
      } else {
        this.$message.error(res.msg);
      }
    },
    async getUser(ref_id) {
      let { data: res } = await get_ref({ ref_id });
      if (res.code == 200) {
        this.userList = res.data;
      } else {
        this.$message.error(res.msg);
      }
    },
    // 提交
    handleSubmit(form1) {
      this.$refs[form1].validate(async (valid) => {
        if (valid) {
          let datas = {
            id: this.form1.id,
            opt: this.form1.opt,
            remark: this.form1.remark,
            admin_id: this.form1.admin_id,
            reward: JSON.stringify([...this.tableData]),
          };
          console.log("datas", datas);
          let { data: res } = await toCheck(datas);
          if (res.code == 200) {
            this.$message.success(res.msg);
            this.$router.push("/traditionalForm");
          } else {
            this.$message.warning(res.msg);
          }
        } else {
          this.$message.warning("有必选项每填，不能提交哦~~");
        }
      });
    },
  },
};
</script>
<style  scoped>
.recommend {
  min-width: 280px;
  color: #1d2023;
  text-align: center;
  font-size: 16px;
  margin-left: 25px;
}
.boxContent {
  margin-top: 20px;
  height: 25px;
  line-height: 25px;
  border: 1px solid #ddd;
  text-align: center;
  padding: 0 12px;
}
.arrow {
  text-align: center;
  padding: 12px 0 0 0;
}
.fontColor {
  font-size: 16px;
  text-align: center;
  margin-bottom: 15px;
}
.mb_20 {
  font-size: 20px;
  text-align: center;
  margin-top: 20px;
}
.mr {
  margin: 30px 0 0 -90px;
}
</style>